<#macro cols title='' path='' params='' url='' page=true>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${title}列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./res/layui/css/layui.css" media="all">
<script src="./js/jq3/jquery.min.js" charset="utf-8"></script>
<script src="./res/layui/layui.all.js" charset="utf-8"></script>
<style>
body{font-size:12px;}
</style>
</head>
<script>
		var basePath = "";
		var ${path}Table;		
$(function(){
		layui.use(['layer', 'form', 'table', 'util'], function () {
			var layer = layui.layer,
				form = layui.form,
				table = layui.table,
				util = layui.util;
			${path}Table = table.render({
				elem: '#${path}List',
				method: 'get',
				cellMinWidth: 80,
				height: 420,
				totalRow: true, //开启合计行
				//toolbar: 'default',//默认按钮样式。可以用下面的替换
				toolbar: '#${path}Toolbar',//自定义按钮样式				
				size: 'sm',
				url: "/test-layui/listData",
				page: 
					<#if page>
						{
							limit: 20,//每页显示记录
							limits: [10, 20, 50, 100, 500],//每页显示记录可选范围。
							layout: ['prev', 'page', 'next', 'limit', 'count', 'refresh', 'skip']
						}
					<#else>
						false
					</#if>
				,
				request: {
					pageName: 'pageNo', // 页码的参数名称，默认：page
					limitName: 'pageSize' // 每页数据量的参数名，默认：limit
				},
				response: {//成功返回编码
					statusCode: 'success'
				},
				parseData: function(res) {
					return {
						"code": res.status,//成功标识
						"msg": res.message,
						"count": res.data.page.total,//分页总数
						"data": res.data.datas//数据list
					};
				},
				cols: [[
					<#nested />
				]]
			});
		});	
	});
	</script>
<body>
<div class="layui-tab-content">
	<#if title != ''>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend><a name="compatibility">${title}</a></legend>
		</fieldset>
	</#if>	
	
</#macro>
<#macro search path=''>
<div class="layui-form">
	<#nested />
	<button id="${path}Search" class="layui-btn" data-type="reload">搜索</button>
</div>
</#macro>
<#macro search2 path=''>
<script>
layui.use(['table'], function () {
    var table = layui.table;
	$('#${path}Search').on('click', function(){
		${path}Table.reload({
			where: {
				<#nested />
			},
			page: {
				curr: 1
			}
		});
	});
});
</script>
</#macro>
<#macro buttons path=''>
<script type="text/html" id="${path}Toolbar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="event_1">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="event_2">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="event_3">删除</a>
</script>
</#macro>

<#macro buttons2 title='' path='' pri='' params=''>
<script>
	layui.use(['jquery', 'form', 'table'], function () {
	var $ = layui.jquery,
		form = layui.form,
		table = layui.table;
	table.on('toolbar(test)', function(obj){	
	    var checkStatus = table.checkStatus(obj.config.id);
	    var data = checkStatus.data; //获取选中的数据
		switch(obj.event){
			case "event_1"://第一个按钮事件
				event_1("新增","800","600","/test-layui/add");
			break;
			case "event_2"://第二个按钮事件
				event_2(table,"编辑","800","600","/test-layui/add",data);
			break;
			case "event_3"://第二个按钮事件
				layer.alert("33333333333");
			break;
		}
		
		
	});
	//监听行工具事件
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'event_1'){
	      layer.msg('查看操作');
	    } else if(layEvent === 'event_3'){
	      layer.confirm('真的删除行么', function(index){
	        obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //向服务端发送删除指令
	      });
	    } else if(layEvent === 'event_2'){
	      layer.msg('编辑操作');
	    }
	  });
	  
	var window_width = $(window).width()-20;
	var window_height = $(window).height()-20;
	function event_1(title, width, height, url) {
		if(height > window_height) {
			height = window_height;
		}
		layer.open({
			type: 2, // iframe层
			title: title,
			area: [width+'px', height+'px'],
			maxmin: true,
			shade: 0.2,
			content: url,
			end: function() {
				//${path}Table.reload();
			}
		});
	}
});

var window_width = $(window).width()-20;
var window_height = $(window).height()-20;
function event_1(title, width, height, url) {
	if(height > window_height) {
		height = window_height;
	}
	layer.open({
		type: 2, // iframe层
		title: title,
		area: [width+'px', height+'px'],
		maxmin: true,
		shade: 0.2,
		content: url,
		end: function() {
			//${path}Table.reload();
		}
	});
}
function event_2(table, title, width, height, url,obj) {
	if(height > window_height) {
		height = window_height;
	}	
    var data = obj;
	
	if(data.length == 0) {
		layer.alert("请选择一条${title}数据！");
		return false;
	} else if(data.length > 1){
		layer.alert("已选中多条数据，请选择一条${title}数据！");
		return false;
	}
	
	layer.open({
		type: 2, // iframe层
		title: title,
		area: [width+'px', height+'px'],
		maxmin: true,
		shade: 0.2,
		content: url,
		end: function() {
			//${path}Table.reload();
		}
	});
}


</script>
</#macro>

<#macro content path=''>
<table class="layui-hide" id="${path}List" lay-filter="test"></table>
		
		<div class="layui-tab-item">
	      <div id="pageDemo"></div>
	    </div>
	</div>
</body>
</html>
</#macro>
